<template>
      <ul class="nav-box">
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_03.png">
          <span>嗨购超市</span>
        </li>
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_05.png">
          <span>数码电器</span>
        </li>
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_07.png">
          <span>嗨购服饰</span>
        </li>
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_09.png">
          <span>嗨购生鲜</span>
        </li>
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_11.png">
          <span>嗨购到家</span>
        </li>
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_18.png">
          <span>充值缴费</span>
        </li>
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_19.png">
          <span>9.9元拼</span>
        </li>
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_20.png">
          <span>领卷</span>
        </li>
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_21.png">
          <span>领金贴</span>
        </li>
        <li>
          <img src="../assets/images/Z791F9MZNX4[~J5DJ2~WK$7_22.png">
          <span>plus会员</span>
        </li>
      </ul>
</template>

<script>
export default {
   name:"NavBar",
   data(){
    return {
    
    }
   }
}
</script>

<style scoped>
.nav-box{
  width: 100%;
  height: 10rem;
  /* background-color: rgba(250, 0, 237, 0.671); */
  display:flex;
  flex-wrap: wrap;
  justify-content:space-around;
}
.nav-box li{
  width: 20%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  font-size: 12px;
}
</style>